.topNavigate {
    @apply z-40 shadow flex items-center justify-between;
    @apply px-3 sticky top-0 h-8 bg-white;
}

.space {
    @apply p-3;
    .avatar {
        @apply w-15 h-15  rounded-full;
    }

    .menu {
        @apply flex;

        & > div {
            @apply mx-3;
        }
    }
}
.see-more {
    @apply py-1.5 text-center text-blue-500 bg-blue-50;
}
.place {
    .img {
        img {
            @apply w-full h-full object-cover;
        }
    }
    .ul {
        .like {
            transform: translateY(-50%);
            @apply absolute w-11 h-11 bg-white right-11 top-0 rounded-full shadow-md;
            @apply flex justify-center items-center;
        }
        & > div {
            @apply relative bg-white shadow-md m-3 rounded-md p-3;
        }
    }
    .see {
        @apply p-3 flex justify-between items-center fixed bottom-0  bg-red-300 w-full;

        .gone {
            @apply rounded-md bg-white px-3 py-1 shadow-md;
        }
    }

    .q-item {
        @apply flex justify-between my-3;

        .q {
            @apply font-bold;
        }
    }
}

.comments {
    .comments-block {
        @apply my-2;

        .header {
            @apply mb-2 flex text-sm;
        }
        .avatar {
            width: 40px;
            height: 40px;
            @apply mr-2 rounded-full overflow-hidden;

            img {
                @apply w-full h-full;
            }
        }
    }
}
.cmt-ctx {
    .comt {
        @apply bg-white p-1 my-2 shadow-md rounded-md;

        .header {
            @apply mb-2 flex text-sm;
        }
        .avatar {
            width: 40px;
            height: 40px;
            @apply mr-2 rounded-full overflow-hidden;

            img {
                @apply w-full h-full;
            }
        }
    }

    .add {
        @apply fixed w-15 h-15 right-5 bottom-5 bg-blue-500 text-white rounded-full shadow-md;
    }

    .add-item {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 1px 898px;
        min-height: 300px;
        @apply fixed w-[80%] p-2 rounded-md bg-white;

        textarea {
            border: none;
            resize: none;
            width: 100%;
            height: 150px;
            @apply bg-gray-100 px-1.5 py-2;
        }

        button {
            @apply mx-auto mt-5 block w-15 h-15 bg-blue-500 text-white rounded-full shadow-md;
        }
    }
}

.post-ctx {
    .post {
        @apply bg-white my-3 shadow-md rounded-md p-3;

        .header {
            @apply mb-2 flex text-sm;
        }
        .avatar {
            width: 40px;
            height: 40px;
            @apply mr-2 rounded-full overflow-hidden;

            img {
                @apply w-full h-full;
            }
        }

        .del {
            @apply w-full bg-red-100 text-center text-red-500 py-2 mt-2;
        }
    }

    .add {
        @apply fixed w-15 h-15 right-5 bottom-5 bg-blue-500 text-white rounded-full shadow-md;
    }

    .add-item {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 1px 898px;
        min-height: 300px;
        @apply fixed w-[80%] p-2 rounded-md bg-white;

        textarea {
            border: none;
            resize: none;
            width: 100%;
            height: 150px;
            @apply bg-gray-100 px-1.5 py-2;
        }

        button {
            @apply mx-auto mt-5 block w-15 h-15 bg-blue-500 text-white rounded-full shadow-md;
        }
    }
}

.login {
    @apply p-4;

    input {
        @apply w-[80%] mx-auto block my-5 bg-gray-100;
        @apply bg-white border-blue-300 rounded-md;
        border: 2px solid rgba(147, 197, 253, var(--tw-border-opacity)) !important;
    }

    button {
        @apply mx-auto block bg-blue-500 px-20 py-3 text-white rounded-md;
    }
}

.space {
    .header {
        @apply flex mb-3;

        .avatar {
            width: 70px;
            height: 70px;
            @apply mr-2 rounded-full overflow-hidden;

            img {
                @apply w-full h-full;
            }
        }
    }
}

.space-comment {
    .space-block {
        @apply bg-white my-3 p-2 shadow-md rounded-md;

        .avatar {
            width: 40px;
            height: 40px;

            .header {
                @apply text-sm;
            }

            img {
                @apply w-full h-full;
            }
        }
    }
}

.questions {
    @apply bg-white p-2 my-3 shadow-md rounded-md flex justify-around;

    .title {
        font-size: 1.2rem;
    }
}
